<template>
    <div class="take-photo">
        <div class="content">
            <div id="word">请上传您的小票图片</div>
            <label class="photo-la">
                <img id="blah" :src="imgPhoto" @click="takePhoto"/>
            </label>
            <form id="formUpload">
                <div id="uploadDiv">
                    <!-- <input name="fileUpload" id="imgInp"  type="file" accept="image/*" multiple onchange="readURL(this)"> -->
                </div>
                <input name="openId" type="hidden" id="openId"/>
            </form>
            <!--<p class="btn-fat">-->
            <!--<a onclick="submit()"  class="button button-big button-round">提交</a>-->
            <!--</p>-->
            <van-button round type="primary"
                        style="padding: 0 30px; background-color: #76dce1;border: 1px solid #76dce1;"
                        @click="uploadPhoto">提交
            </van-button>
            <!--<van-button round type="primary"-->
                        <!--style="padding: 0 30px; background-color: #76dce1;border: 1px solid #76dce1;"-->
                        <!--@click="test">测试按钮-->
            <!--</van-button>-->
            <div class="line">
                <span>特别声明</span>
            </div>
            <div class="icon-font">
                <div>1、使用拍照积分，上传小票时，会因网络原因延迟，烦请耐心等待。</div>
                <div>2、使用中有任何疑问，请致电0757-86562356咨询。</div>
                <div>3、当天小票48小时内积分有效。</div>
                <div>4、对于积分异常，在法律可范围内有权冻结该账户。</div>
                <div>5、账户冻结之后需解冻，请至1楼客服中心（UR旁边）出示相关支付证明解冻。</div>
                <div>6、同一时段同一餐饮只能积分一张（任意一张），恶意积分会取消积分资格。</div>
            </div>
            <p class="btn-bom" @click="goToView('/self_integral_records')">查看记录</p>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import wx from 'weixin-js-sdk'
    import Cookies from 'js-cookie'
    import {Toast,Dialog} from 'vant';
    import {isDev} from '@/utils/tools'
    Vue.use(Dialog);
    Vue.use(Toast);
    export default {
        name: "TakePhoto",
        data() {
            return {
                token: '',
                preImg: '',
                localId: '',//原预览id
                serverId: ''
            }
        },
        mounted() {
            this.token = Cookies.get('token')
        },
        computed: {
            imgPhoto() {
                if (!this.preImg || this.preImg.length <= 0) {
                    return "/images/photo2.jpg"
                } else {
                    return this.preImg
                }
            }
        },
        methods: {
            takePhoto() {
                let _this = this;
                wx.chooseImage({
                    count: 9, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        _this.localId = res.localIds[0];
                        if (window.__wxjs_is_wkwebview) {
                            wx.getLocalImgData({
                                localId: res.localIds[0], // 图片的localID
                                success: function (res) {
                                    _this.preImg = res.localData;// localData是图片的base64数据，可以用img标签显示
                                }
                            });
                        } else {
                            _this.preImg = res.localIds[0];
                        }
                    }
                });
            },

            uploadWxImage() {
                var _this = this
                wx.uploadImage({
                    localId: _this.localId, //图片在本地的id
                    isShowProgressTips: 1, // 默认为1，显示进度提示
                    success: function (res) {//上传图片到微信成功的回调函数   会返回一个媒体对象  存储了图片在微信的id
                        _this.serverId = res.serverId
                        alert()
                        _this.upLoadImageToServe()
                    },
                    fail: function (res) {
                        // alert(JSON.stringify(res));
                        // Toast.fail('上传失败');
                        console.log(res);
                    }
                });
            },

            upLoadImageToServe() { //上传到本地数据库
                this.$api.integral.uploadImgToServe({openId: this.token, serverId: this.serverId}).then(res => {
                    if (res.code == 0) {
                        Toast.success('上传成功!');
                    } else {
                        Toast.fail('上传失败,稍后重试!');
                    }
                    this.preImg = ''
                }).catch(error => {
                    Toast.success('上传失败,稍后重试!');
                    this.preImg = ''
                })
            },
            uploadPhoto() {
                let _this = this
                Dialog.confirm({
                    title: '提示',
                    message: '是否上传小票'
                }).then(() => {
                    _this.uploadWxImage()
                }).catch(() => {

                });
            },
            goToView(path){
                this.$router.push(path)
            },
            test(){
                //openId=oiQAFuA5sUC18iViiZmaHU8FK9-8,serverId=0GDx2AAcMg28xRQkoEsREx3OHacoR_u_rVA1OVWFiBLLpvCoLxFv2w5zwXXPA2TK
                this.serverId="0GDx2AAcMg28xRQkoEsREx3OHacoR_u_rVA1OVWFiBLLpvCoLxFv2w5zwXXPA2TK";
                this.upLoadImageToServe()
            }
        }
    }
</script>

<style lang="less">
    .take-photo {
        height: 100%;
        background-color: rgb(241, 245, 248);
        .content {
            height: 100%;
            text-align: center;

        }
        .photo-la {
            width: 231px;
            display: block;
            margin: 0 auto;
        }
        #blah {
            width: 100%
        }
        .content {
            text-align: center;
            background-color: rgb(241, 245, 248);
        }
        #word {
            color: #76dce1;
            font-size: 0.8em;
            padding: 25px 0;
        }
        .btn-fat {
            margin: 25px auto;
            width: 31%;
        }
        .button {
            background-color: #76dce1;
            color: white;
            border: 1px solid #76dce1;
        }
        .line {
            margin: 40px 0;
            line-height: 1px;
            border-left: solid 100px #76dce1;
            border-right: solid 100px #76dce1;
            text-align: center;
            color: #76dce1;
        }
        .btn-bom {
            position: fixed;
            bottom: 0;
            width: 100%;
            color: white;
            text-align: center;
            background: #76dce1;
            margin: 0;
            height: 35px;
            line-height: 35px;
            padding-bottom: 50px;
        }
        .icon-font {
            margin: 0 10px 57px 10px;
            text-align: left;
            padding-bottom: 50px;
        }
    }
</style>
